import { defineComponent, getCurrentInstance, reactive, ref, UnwrapRef } from 'vue';
import { RuleObject, ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
import { useStore } from 'vuex'
import { useRouter } from 'vue-router';
import './login.less'
interface FormState {
  pass: string;
  checkPass: string;
}
interface Token {
  status: number
  token: string
}
interface User {
  status: number
  user: string
}
export default defineComponent({
  setup() {
    const store = useStore()
    const route = useRouter()
    console.log(store);
    
    const formRef = ref();
    const {proxy} = getCurrentInstance() as any
    const formState: UnwrapRef<FormState> = reactive({
      pass: '',
      checkPass: '',
    });
    let validatePass = async (rule: RuleObject, value: string) => {
      if (value === '') {
        return Promise.reject('Please input the name');
      } else {
        return Promise.resolve();
      }
    };
    let validatePass2 = async (rule: RuleObject, value: string) => {
      if (value === '') {
        return Promise.reject('Please input the password');
      } else {
        return Promise.resolve();
      }
    };
    const rules = {
      pass: [{ validator: validatePass, trigger: 'change' }],
      checkPass: [{ validator: validatePass2, trigger: 'change' }],
    };
    const layout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
    };
     const handleFinish =(values: FormState) => {
      proxy.$API.GET_TOKEN().then((res: Token) => {
        sessionStorage.setItem('token', res.token)
        store.commit('SAVE_TOKEN',res.token)
        proxy.$API.POST_USER(values).then((res: User) => {
        sessionStorage.setItem('user', res.user )
        store.commit('SAVE_USER',res.user)
      }).finally(() => {
        route.push('/home')
      })
      })
        // store.dispatch('POST_TOKEN',values)
        //  store.dispatch('POST_USER',values)
      console.log(values, formState);
    };
    const handleFinishFailed = (errors: ValidateErrorEntity<FormState>) => {
      console.log(errors);
    };
    const resetForm = () => {
      formRef.value.resetFields();
    };
    return () => (
      <div class="login_bg">
        <a-card class="card_width">
          <a-form
            name="custom-validation"
            ref={formRef}
            model={formState}
            rules={rules}
            labelCol={layout.labelCol}
            wrapper-col={layout.wrapperCol}
            onFinish={handleFinish}
            onFinishFailed={handleFinishFailed}
          >
            <a-form-item required has-feedback label="用户名" name="pass">
              <a-input v-model={[formState.pass,'value']} type="password" autocomplete="off" />
            </a-form-item>
            <a-form-item required has-feedback label="密码" name="checkPass">
              <a-input v-model={[formState.checkPass,'value']} type="password" autocomplete="off" />
            </a-form-item>
            <a-form-item wrapper-col={{ span: 15, offset: 8 }}>
              <a-button type="primary" html-type="submit">提交</a-button>
              <a-button style="margin-left: 10px" onClick={resetForm}>重置</a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </div>
    );
  },
})
